<script setup>
import { onMounted, ref, markRaw } from 'vue'
import Header from '@/views/content/util/header.vue'
import { ElButton, ElTableColumn, ElTable, ElLink, ElTabs, ElTabPane, ElInput, ElSelect, ElOption, ElMessage, } from 'element-plus';
import NumberCard from '@/views/content/util/numberCard.vue'
import AssetChange from '@/views/content/components/finance/assetChange.vue'

const storeListName = ref([{ name: '浆·小白' }])
const selectStore = ref('浆·小白')
const selectHandle = () => {

}
</script>





<template>
    <div>
        <div>
            <Header title="资产主体"></Header>
        </div>
        <div class="store-select">
            <div>
                <label>选择店铺： </label>
                <el-select v-model="selectStore" @change="selectHandle" placeholder="请选择店铺">
                    <el-option v-for="item in storeListName" :label=item.name :value=item.name />
                </el-select>
            </div>

        </div>
        <div>
            <div>
                <Header title="账户概况"></Header>
            </div>
            <el-row :gutter="16">
                <el-col :span="5">
                   
                    <NumberCard title="门店总金额" value="3000.00" info="已提现金额+待结算金额"></NumberCard>
                </el-col>
                <el-col :span="5">
                    <NumberCard title="待结算金额" value="1500.00" info="未提现金额"></NumberCard>
                </el-col>
                <el-col :span="5">
                    <NumberCard title="已提现金额" value="1500.00" info="申请提现结算后金额"></NumberCard>
                </el-col>
                <el-col :span="5">                  
                    <NumberCard title="累计收入" value="1500.00" info="申请提现结算后实际得到的金额"></NumberCard>
                </el-col>
            </el-row>

            <div>

            </div>

        </div>



    <div style="margin-top: 20px;">
        <div>
            <Header title="资产变动"></Header>
        </div>
        <div style="margin-top: 20px;">
            <AssetChange></AssetChange>
        </div>
    </div>
       

    </div>
</template>



<style  scoped>
.store-select {
    height: 90px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
}



</style>